<template>
  <div class="detail">
    <!-- 文章详情,导航 -->
    <van-nav-bar
      class="nav-main"
      title="文章详情"
      left-arrow
      :fixed="true"
      @click-left="$router.go(-1)"
    />
    <!-- 文章标题 -->
    <van-cell>
      <template #title>
        <h2>{{ details.title }}</h2>
      </template>
    </van-cell>

    <!-- 图片姓名关注 -->
    <van-cell>
      <div class="xiangq">
        <div class="img">
          <img
            src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2795885985,3120166443&fm=26&gp=0.jpg"
            alt=""
          />
        </div>
        <div class="wangm">
          <div class="nema">{{ details.aut_name }}</div>
          <div class="shi">{{ details.pubdate | fromtime }}</div>
        </div>
        <div class="botton">
          <van-button
            type="info"
            round
            class="aa"
            size="normal"
            v-if="details.is_followed === false"
            @click="follow"
            >+关注</van-button
          >
          <van-button
            type="info"
            round
            class="aa"
            size="normal"
            v-else
            @click="cancel"
            >取消关注</van-button
          >
        </div>
      </div>
    </van-cell>
    <!-- 文章内容 -->
    <van-cell>
      <div class="content" v-html="details.content"></div>
    </van-cell>
    <!-- 猜你喜欢 -->
    <van-cell>
      <div class="dianzxh">
        <h3>猜你喜欢</h3>
        <div class="left">
          <div>了解小程序</div>
          <div>了解小程序</div>
          <div>了解小程序</div>
        </div>
        <div class="right">
          <div>了解小程序</div>
          <div>了解小程序</div>
          <div>了解小程序</div>
        </div>
      </div>
    </van-cell>
    <!-- 喜欢,不喜欢 -->
    <van-cell>
      <div class="anniu">
        <div>
          <van-button
            type="danger"
            round
            plain
            class="mim "
            v-if="details.attitude === 1"
            @click="quguang"
            ><van-icon name="good-job-o" color="red" />点赞</van-button
          >
          <van-button round plain class="mim " v-else @click="likes"
            ><van-icon name="good-job-o" />点赞</van-button
          >
        </div>
        <div>
          <van-button
            type="danger"
            round
            plain
            v-if="details.attitude === 0"
            @click="ordinary"
            ><van-icon name="delete" color="red" />不喜欢</van-button
          >
          <van-button round plain v-else @click="dislikess"
            ><van-icon name="delete" />不喜欢</van-button
          >
        </div>
      </div>
    </van-cell>

    <!-- 评论区域 -->

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <comment :item="item" v-for="(item, index) in commentList" :key="index" :isShow="false" />
    </van-list>
    <!-- 图片 -->
    <van-cell>
      <img
        src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=267903731,3918179808&fm=26&gp=0.jpg"
        alt=""
      />
      <div class="pink">前端与移动开发-课程升级6.0 高薪技术全覆盖</div>
      <div class="pink">学前端选择传智播客</div>
    </van-cell>
    <!-- 书写评论区域 -->
    <send @main="main" :isShow="false" />

    <!-- 回复组件 -->
    <reply ref="reply" />
  </div>
</template>

<script>
import reply from '../home/com/reply.vue' //回复评论 (组件不能加{})
import {
  apiGetDetail,
  apiFollowings,
  apiCancel,
  apiLikings,
  apiQux,
  apiDiislikes,
  apiOrdinary,
  apiComment // 获取评论
} from '@/api/article.js' // 文章详情 关注作者 取关
import comment from '../home/com/comment' // 评论组件
import send from '../home/com/send' // 书写评论组件
export default {
  components: {
    comment,
    send,
    reply
  },
  data () {
    return {
      // @click="$router.push('/detail/' + item.art_id)"
      // path: '/detail/:artid',
      artid: this.$route.params.artid, //动态路由的传值,文章的id
      details: {}, // 文章详情
      loading: false, //list组件的双向绑定,
      finished: false, // 加载完毕
      offset: null, //偏移量,第一次不用传
      limit: 10, // 页容量
      commentList: [], // 评论数据
      totalCount: 0, //  评论的总条数
      endid: null // 结束的标识
    }
  },
  methods: {
    main (tianjList) {
      this.commentList.unshift(tianjList)
    },

    // list 的加载事件
    async onLoad () {
      const res = await apiComment({
        artid: this.artid,
        offset: this.offset,
        limit: this.limit
      })
      // 保存数据 连接数组,为了10条+更多的  保存下一页的标识  保存结束的标识 保存评论总条数
      this.commentList = [...this.commentList, ...res.data.data.results]
      this.offset = res.data.data.last_id
      this.endid = res.data.data.end_id
      this.totalCount = res.data.data.total_count
      // 将loading改为flase,解决一直转圈的问题
      this.loading = false
      // 判断是否加载完毕,下一页的标识和结束的标识相等说明没有数据了,就完全结束
      if (this.offset === this.endid) {
        this.finished = true
      }
      console.log(res.data.data.results)
    },

    // 取消对文章的不喜欢 判断用户登录 获取文章id 将对文章的态度改为-1(也就是无态度)  发送请求到服务器
    async ordinary () {
      if (!this.$login()) {
        return
      }
      this.details.attitude = -1
      var chid = this.details.art_id
      await apiOrdinary(chid)
    },
    // 对文章的不喜欢 判断用户登录  获取文章id 发送请求到服务器  将文章的态度改为0 也就是不喜欢
    async dislikess () {
      if (!this.$login()) {
        return
      }
      var chid = this.details.art_id
      await apiDiislikes(chid)
      this.details.attitude = 0
    },
    // 取消点赞,判断用户登录   获取文章id  发送请求  提示信息  将attitude改为-1无态度  this.details.attitude = -1也要放到发送请求的前面
    async quguang () {
      if (!this.$login()) {
        return
      }
      this.details.attitude = -1
      var qux = this.details.art_id
      await apiQux(qux)
    },
    // 点赞,注意事项,v-if 1为是喜欢,不要给它加点击事件,判断用户登录   获取文章id  发送请求  提示信息  将attitude改为1  喜欢
    async likes () {
      if (!this.$login()) {
        return
      }
      var like = this.details.art_id
      await apiLikings(like)
      // this.$toast.success('点赞成功')
      this.details.attitude = 1
    },
    // 关注作者  判断用户是否登录,没登录就终止代码,得到作者的id  发送到服务器  提示关注成功  将是否关注作者改为true
    async follow () {
      if (!this.$login()) {
        return
      }
      var autid = this.details.aut_id //易错点art aut
      await apiFollowings(autid)
      this.$toast.success('关注成功')
      this.details.is_followed = true
    },
    // 取关作者  判断用户是否登录 没登录终止代码  发送到服务器  提示取关成功,将is_followed = fasle,
    // 出现一个bug ,要把改为false放到发送服务器前面,不然显示不了取消关注,要自己刷新,但放到了前面会报错,这不要紧,能改变就行,是后端的问题
    async cancel () {
      if (!this.$login()) {
        return
      }
      this.details.is_followed = false
      
      await apiCancel(autid)
      var autid = this.details.aut_id
    },
    // 获取文章详情
    async getDetails () {
      const res = await apiGetDetail(this.artid)
      this.details = res.data.data
      console.log(res)
    }
  },
  created () {
    // 初始化文章详情,才能得到数据
    this.getDetails()
  }
}
</script>

<style lang="less" scoped>
.detail {
  margin-top: 46px;
  margin-bottom: 66px;
  .nav-main {
    background-color:#3e9df8;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  /deep/ i.van-icon.van-icon-arrow-left.van-nav-bar__arrow {
    color: #fff;
  }
  .xiangq {
    display: flex;
    //   justify-content: center;
    /deep/ .h11 {
      padding: 20px;
    }

    .img {
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
      }
    }
    .wangm {
      .nema {
        font-size: 16px;
        color: #9a9a9a;
      }
      .shi {
        font-size: 14px;
        color: #dbdbdb;
      }
    }
  }
  .botton {
    .aa {
      flex: 1;
      position: absolute;
      right: 0;
      top: 0;
      padding: 15px 30px;
    }
  }
  .content {
    color: black;
  }
  .dianzxh {
    font-size: 16px;

    .left {
      padding: 8px;
      color: #b2b2b2;
      float: left;
    }
    .right {
      padding: 8px;
      color: #b2b2b2;
      float: right;
    }
  }
  .anniu {
    display: flex;
    margin-top: 15px;
    text-align: center;
    justify-content: space-around;
    vertical-align: middle;
    .mim {
      vertical-align: middle;
    }
  }
  .pink {
    color: black;
  }
}
</style>
